import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Modal, Form, message, Table, Button, Input, Alert } from 'antd';
import { ModalForm } from '../../../components'
import { fetchData } from '../../../components/AjaxConsumer'


const EditableCell = ({ value, onChange }) => (
    <div>
        <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
    </div>
);


export default class CalcPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: null,
            submitUrl: '/base/region/c',
            sortedInfo: null,
            conditonData: {},
            calcvalue: null,
            wlcodestr: ''
        };


    }

    renderColumns(text) {
        if (text == '') {
            return (<span></span>);
        } else if (text == '0') {
            return (<span>内销</span>);
        } else if (text == '1') {
            return (<span>外销</span>);
        } else if (text == '2') {
            return (<span>样机</span>);
        }
    }

    //显示弹框
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    // 隐藏弹出框
    hideModal = () => {
        this.setState({
            visible: false,
        });
    }

    handleOk = () => {
        this.setState({
            visible: false,
        });
        this.refreshHandle();
    }

    handleCancel = () => {
        this.setState({
            visible: false,
            sortedInfo: null
        });

    }

    //刷新List列表
    refreshHandle = () => {
        console.log("刷新List列表")
        this.props.refreshHandle();
    }

    // (外部调用)
    editHandle = (resData, pstData) => {
        // 临时数据
        resData.map((item, index) => {
            item.key = index;
            item.calcAmount = null;
        });
        // console.log(data);

        this.setState({
            calcvalue: null
        });
        let str = '原库位: ' + pstData.wlCode + '  已分配数量：'+pstData.allocAmount;
        this.setState({
            visible: true,
            formTitle: '调整分配数量',
            dataSource: resData,
            wlcodestr: str,
            originWlCode: pstData.wlCode,
            afterAllocAmount:pstData.allocAmount
            // conditonData: pstData
        });
    }

    calcColumns = (text, record, column) => {
        return (
            <EditableCell
                // editable={record.editable}
                value={text}
                onChange={value => this.handleChange(value, record.key, column)}
            />
        );
    }

    handleChange(value, key, column) {
        const newData = [...this.state.dataSource];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
            target[column] = value;
            this.setState({ dataSource: newData });
        }
    }

    submitCalc = () => {
        let optionObj = {};
        optionObj.originWlCode = this.state.originWlCode;
        optionObj.dataSource = this.state.dataSource;
        let sumCalcAmount = 0;
        for(var i in this.state.dataSource){
            sumCalcAmount = sumCalcAmount +parseInt(this.state.dataSource[i].calcAmount);
            if(this.state.dataSource[i].calcAmount<0){
                Modal.error({
                    title: '错误提示',
                    content: '调整数量不能为负数',
                });
                return;
            }
            if(this.state.dataSource[i].availAmount>=0&&this.state.dataSource[i].availAmount<this.state.dataSource[i].calcAmount){
                Modal.error({
                    title: '错误提示',
                    content: '调整数量不能大于当前库位可用数量',
                });
                return;
            }
            if(this.state.dataSource[i].availAmount<0&&this.state.dataSource[i].calcAmount>0){
                Modal.error({
                    title: '错误提示',
                    content: '存在库位可用数量不足，不能调整',
                });
                return;
            }
        }
        if(this.state.afterAllocAmount < sumCalcAmount){
            Modal.error({
                title: '错误提示',
                content: '调整数量不能大于原库位已分配数量',
            });
            return;
        }
        
        const options = {
            // url: '/wmsrest/product/odsprostoragesn/r/detail/',
            url:'/wmsrest/product/odsprostorage/adjust/allAMount/confirm',
            type: 'POST',
            //condition: optionObj,
            condition:  JSON.stringify(optionObj),
            contentType: 'application/json; charset=utf-8'
        };
        fetchData(this, options, (resData) => {
            // this.refs.calcPage.editHandle(resData, pstData);
        });
        this.handleOk();
    }

    render() {
        // let {sortedInfo}=this.state;
        // sortedInfo=sortedInfo||{}
        const value = this.state.calcvalue;
        this.columns = [
            {
                title: '序号',
                dataIndex: 'key',
                // dataIndex: 'materialCode',
                width: '5%',
            },
            {
                title: '物料号',
                dataIndex: 'materialCode',
                // dataIndex: 'materialCode',
                width: '10%',
            }, {
                title: '物料描述',
                dataIndex: 'materialDesc',
                width: '20%',
            }, {
                title: '成品类型',
                dataIndex: 'productType',
                width: '10%',
                render: (text, record, index) => this.renderColumns(text)
            }, {
                title: '库存数量',
                dataIndex: 'iventAmount',
                width: '10%',
            }, {
                title: '可用数量',
                dataIndex: 'availAmount',
                width: '10%',
            },{
                title: '冻结数量',
                dataIndex: 'lockAmount',
                width: '10%',
            },{
                title: '已分配数量',
                dataIndex: 'allocAmount',
                width: '9%',
            },{
                title: '库位',
                dataIndex: 'wlCode',
                width: '12%',
            }, {
                title: '调整分配数量',
                dataIndex: 'calcAmount',
                width: '9%',
                render: (text, record) => this.calcColumns(text, record, 'calcAmount')
            }
        ];
        return (

            <Modal
                style={{ top: '20px' }}
                visible={this.state.visible}
                title={this.state.formTitle ? this.state.formTitle : '填写表单'}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={'1100px'}
                footer=''
            >
                {/* <Button type="Excel" onClick={this.onClickDC}>Excel</Button> */}
                <div style={{ margin: '10px' }}>
                    <Alert message={this.state.wlcodestr} type="info" />
                    {
                        <Table columns={this.columns}
                            dataSource={this.state.dataSource}
                            rowKey={row => row.odsProStorageSnId}
                            showHeader={true}
                            pagination={false}

                            //scroll={{ y: 380 }}
                            size="small"
                            bordered
                        />
                    }
                </div>
                <div style={{ textAlign: 'right ' }}>
                    <Button type="primary" onClick={this.submitCalc}>确定</Button>
                </div>

            </Modal>
        )
    }
}